<template>
  <div class="demo-progress">
    <div class="alert-data">
      <div class="alert-data-item">
        <div class="handle-title">
          <div class="row alert"></div>
          <span
            class="alert-data-item-label"
            style="        color: rgba(255, 255, 255, 1);"
            >已处理</span
          >
        </div>
        <span
          class="alert-data-item-value"
          style="color: rgba(40, 153, 126, 1);"
          >{{ alertToday }}次</span
        >
      </div>
      <div class="alert-data-item">
        <div class="handle-title">
          <div class="row handle"></div>
          <span class="alert-data-item-label">未处理</span>
        </div>
        <span class="alert-data-item-value" style="color: red;"
          >{{ handleToday }}次</span
        >
      </div>
    </div>
    <div class="alert-progress">
      <el-progress
        type="circle"
        :percentage="p"
        :stroke-width="12"
        color="rgba(40, 153, 126, 1)"
        :width="126 * size"
      >
        <template #default="{ percentage }">
          <span class="percentage-label">处理率</span>
          <span class="percentage-value">{{ p }}%</span>
        </template>
      </el-progress>
      <div class="route"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getGeneralValues } from "@/api/general";
import { reactive, ref, computed, onMounted, nextTick, onUnmounted } from "vue";
import { useIds } from "@/stores/screen/ids";
const { getsessionStorage } = useIds();
const size = ref(innerWidth / 1920);
window.onresize = () => (size.value = innerWidth / 1920);
const codeData = [
  {
    name: "今日告警次数",
    code: "AI_ALERT_MESSAGE_DETAIL_TODAY_UNDEAL_EVENT",
  },
  {
    name: "今日处理次数",
    code: "AI_ALERT_MESSAGE_DETAIL_TODAY_DEAL_EVENT",
  },
];
const alertToday = ref();
const handleToday = ref();
let resData = [];
let p = ref();
const initData = async () => {
  let reqData = [];
  codeData.forEach((item: any) => {
    reqData.push({
      code: item.code,
      params: { equipmentIds: getsessionStorage() },
    });
  });

  await getGeneralValues(reqData).then((res) => {
    resData = [];
    codeData.forEach((item: any) => {
      alertToday.value = res.data["AI_ALERT_MESSAGE_DETAIL_TODAY_DEAL_EVENT"]
        ? res.data["AI_ALERT_MESSAGE_DETAIL_TODAY_DEAL_EVENT"].data
        : 0;
      handleToday.value = res.data["AI_ALERT_MESSAGE_DETAIL_TODAY_UNDEAL_EVENT"]
        ? res.data["AI_ALERT_MESSAGE_DETAIL_TODAY_UNDEAL_EVENT"].data
        : 0;
      if (!res.data[item.code]) {
        resData.push({ name: item.name, value: 0 });
      } else {
        resData.push({ name: item.name, value: res.data[item.code].data });
      }
      // chartsData.push(item.name)
    });

    let a = alertToday.value / (alertToday.value + handleToday.value);
    p.value = Math.floor(a * 100);
    if (Object.is(p.value, NaN)) {
      p.value = 0;
    }
    let chartsValue = [{ name: "告警处理率", value: p.value }];
    // console.log(chartsData)
  });
};
const pollingTimer = ref();
const setPollingTimer = () => {
  pollingTimer.value && clearInterval(pollingTimer.value);
  pollingTimer.value = setInterval(() => {
    initData();
  }, 30000);
};
onUnmounted(() => {
  pollingTimer.value && clearInterval(pollingTimer.value);
});
onMounted(() => {
  initData();
  setPollingTimer();
});
</script>

<style scoped lang="scss">
.demo-progress {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  .alert-data {
    width: 100%;
    flex: 0.3;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    .alert-data-item {
      width: 100%;
      display: flex;
      color: rgba(255, 255, 255, 1);
      background: url("../../../../assets/image/dashboard/背景.png") center
        no-repeat;
      justify-content: center;
      align-items: center;
      height: 100%;
      padding-left: clamp(2.188rem, 1.82vw, 4.375rem);
      box-sizing: border-box;
      .handle-title {
        width: 100%;
        align-items: center;
        display: flex;
      }
      .alert {
        background: rgba(60, 229, 189, 1);
      }

      .handle {
        background: rgba(242, 63, 63, 1);
      }

      .row {
        display: flex;
        width: clamp(0.5rem, 0.42vw, 1rem);
        height: clamp(0.5rem, 0.42vw, 1rem);
        border-radius: 2px;
        margin-right: 5px;
      }

      .alert-data-item-label {
        display: flex;
        justify-content: center;
        flex: 1;
      }

      .alert-data-item-value {
        width: 100%;
        font-size: clamp(1rem, 0.83vw, 2rem);
      }
    }
  }

  .alert-progress {
    flex: 0.7;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    :deep(.el-progress path:first-child) {
      // 修改进度条背景色
      stroke: rgba(242, 63, 63, 1);
    }
  }
}

.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: clamp(1.5rem, 1.25vw, 3rem);
  font-weight: bold;
  color: #e2f2ff;
  text-shadow: 0px 0px 6px #26beff;
}

.percentage-label {
  display: block;
  margin-top: 10px;
  color: rgba(255, 255, 255, 1);
}
.route {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 6px dotted rgba(14, 168, 235, 1);
  width: clamp(8.25rem, 6.88vw, 16.5rem);
  height: clamp(8.25rem, 6.88vw, 16.5rem);
  animation: move 10s linear infinite;
}
@keyframes move {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
</style>
